<template>
  <div class="app-container1" >
    <div class="cont1">
      <div class="search-bar1" style=" width: 1300px; padding: 0 0 0 0">
        <div id="build"></div>
        <el-form ref="searchForm" v-model="searchData" label-width="auto" size="mini">
          <el-row :gutter="10">
            <el-col :span="4" style="padding: 0 0 0 0; margin: 0 2% 0 0">
              <el-form-item label="井号">
                <!--                <el-input v-model="searchname" ></el-input>-->
                <el-autocomplete
                  clearable
                  class="handle-input-width"
                  v-model="searchname"
                  value-key="wellname"
                  :fetch-suggestions="FilterEntityName"
                  :trigger-on-focus="true"
                  placeholder="请输入井号："
                  @clear="blurForBug()"
                  @select="handleSelect"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="activeIndex=='2'" :span="6" >
              <el-form-item label="起始月份" >
                <el-date-picker
                  v-model="searchData.start"
                  type="month"
                  placeholder="选择月"
                />
              </el-form-item>
            </el-col>
            <el-col v-else :span="6" >
              <el-form-item label="起始日期">
                <el-date-picker
                  v-model="searchData.start"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="activeIndex=='2'" :span="6">
              <el-form-item label="截止月份">
                <el-date-picker
                  v-model="searchData.end"
                  type="month"
                  placeholder="选择月"
                />
              </el-form-item>
            </el-col>
            <el-col v-else :span="6" >
              <el-form-item label="截止日期" >
                <el-date-picker
                  v-model="searchData.end"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" size="mini" @click="getPageData">查 询</el-button>
              <el-button size="mini" @click="clear">清 空</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div id="sc1"  v-if="this.flag === true" style="width: 85%; height: 50%; position: absolute;left: 7%; top:35%;" >
      <scatter-chart style="overflow:hidden;border-radius: 10px" ref="sca" :redis_Data="Fatherdata" :scat_id="searchname" :start="this.start" :end="this.end" :date_flag="this.date_flag" :im_date="this.import_date"></scatter-chart>
    </div>
    <div id="loading" v-show="this.divf === true" style="width: 300px;overflow:hidden;height: 60px; border:1px; solid-color:#ffffff;border-radius:13px;position: absolute; left: 38%; top:48%; background-color: rgba(255,255,255,0.2)"></div>
    <div v-show="this.flag === true" style="position:absolute; top: 60%; left: 80%">
      <div  class="display" style=" color: goldenrod;  padding: 0px 4px 0px 0px ">
        <li v-for="(item,index) in this.reason_list" :key="index"  style="list-style-type: none">
          {{item}}:
        </li>
      </div>
      <div class="display"  style=" color: lightseagreen;  ">
        <li v-for="(item,index) in this.date_list" :key="index" style="list-style-type: none;">
          {{item}}
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import scatterChart from './LimitTimeScatter'
import * as echarts from 'echarts/core'
import { ScatterChart, LineChart } from 'echarts/charts'
import axios from "axios";
export default {
  components: { scatterChart },
  data() {
    return {
      date_list: [],
      reason_list: [],
      import_date: [],
      date_flag: [],
      activeIndex: '3',
      searchData: {
        end: '',
        start: ''
      },
      searchname: '',
      wellnames: [],
      Fatherdata: {},
      flag: false,
      divf: false,
      start: '',
      end: '',
      option: {
        xAxis: {
          max: 1,
          min: 10,
          data: []
        },
        yAxis: {
          max: 1,
          min: 10
        },
        series: [
          {
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.$http({
      method: 'post',
      url: '/ComperhensiveQuery/getWellName',
      timeout: 400000
    }).then(res => {
      const ReturnData = res.data.data
      console.log(ReturnData, 'return')
      this.wellnames = JSON.parse(JSON.stringify(ReturnData))
    }).catch(err => {
      this.$message.error(err.message)
      console.log(err)
    })
  },
  mounted() {
    console.log(this.searchData, '加载生命函数')
    const vardate = new Date()
    vardate.setMonth(vardate.getMonth() - 4)
    vardate.toLocaleDateString()
    console.log(vardate, 'vardate')
    this.searchData.start = vardate
    this.searchData.end = new Date()
    console.log(this.searchData, 'Data')
  },
  methods: {
    FilterEntityName(queryString, cb) {
      var EntityNameList2 = this.wellnames
      console.log(EntityNameList2, 'List')
      var results = queryString
        ? EntityNameList2.filter(this.createFilter(queryString))
        : EntityNameList2
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    // 只要该输入内容的都匹配
    createFilter(queryString) {
      return (res) => {
        return (res.wellname.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
      }
    },
    // 最终选择的数据
    handleSelect(val) {
      console.log(val)
      this.searchname = val.wellname
    },
    blurForBug() {
      document.activeElement.blur()
    },
    getPageData() {
      this.import_date = []
      this.date_flag = []
      this.date_list = []
      this.reason_list = []
      this.divf = true
      this.flag = false
      let end = {}
      let start = {}
      const name = this.searchname
      const date = this.searchData
      if (date.end > new Date()) {
        this.errorHandle(1)
      } else {
        console.log(name, 'searchname')
        console.log(date, 'searchDate')
        if (this.searchData.end !== null) {
          end = this.searchData.end
          this.end = this.searchData.end
          start = this.searchData.start
          this.start = this.searchData.start
          console.log('youde')
        } else {
          console.log('kongde')
          end = ''
          start = ''
        }
        console.log(end, 'endtime')
        var el = document.getElementById('loading')
        var load = echarts.init(el)
        load.showLoading({
          text: '  数据正在加载中...',
          textColor: '#000000',
          color: '#5F9EA0',
          // maskColor: '#FFFFFF',
          zlevel: 1,
          // 字体大小。从 `v4.8.0` 开始支持。
          fontSize: 20,
          // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
          showSpinner: true,
          // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
          spinnerRadius: 10,
          // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
          lineWidth: 5,
          // 字体粗细。从 `v5.0.1` 开始支持。
          fontWeight: '25',
          // 字体风格。从 `v5.0.1` 开始支持。
          fontStyle: 'normal',
          // 字体系列。从 `v5.0.1` 开始支持。
          fontFamily: 'Microsoft Yahei'
        })
        const xirOpts = {
          height: el.clientHeight,
          width: el.clientWidth
        }
        window.addEventListener("resize", function() {
          load.resize(xirOpts)
        })
        this.$http({
          method: 'post',
          data: {
            wellname: name,
            startDate: start,
            endDate: end
          },
          url: '/ComperhensiveQuery/LoadQuery',
          timeout: 400000
        }).then(res => {
          const ReturnData = res.data.data.wellName
          console.log(ReturnData, 'return')
          this.Fatherdata = this.dataProcess(ReturnData)
          if (this.Fatherdata.wellName === '') {
            console.log('null')
            this.errorHandle(2)
          } else {
            console.log('wellname not null')
            if (this.Fatherdata.nor_date.length === 0 && this.Fatherdata.max_date.length === 0 && this.Fatherdata.min_date.length === 0) {
              console.log('except')
              this.errorHandle(3)
            } else {
              load.hideLoading()
              load.dispose()

              console.log(this.Fatherdata.import_date[1].length, 'how')
              console.log(this.Fatherdata.import_date[1][0][1], 'bb')
              console.log(this.Fatherdata.import_date[1][0].length, 'length')
              if (this.Fatherdata.import_date[1].length === 1){
                var t = this.getNowFormatDate(this.Fatherdata.import_date[1][0][1])
                this.import_date.push(this.Fatherdata.import_date[1][0][1])
                this.date_list.push(t)
              } else if (this.Fatherdata.import_date[1].length === 2) {
                this.import_date.push(this.Fatherdata.import_date[1][0][1])
                var t2 = this.getNowFormatDate(this.Fatherdata.import_date[1][0][1])
                this.date_list.push(t2)
                console.log(this.Fatherdata.import_date[1][1][1], 'ff')
                this.import_date.push(this.Fatherdata.import_date[1][1][1])
                var t3 = this.getNowFormatDate(this.Fatherdata.import_date[1][1][1])
                this.date_list.push(t3)
              }

              for (var j = 0; j < this.Fatherdata.date_flag[1].length; j++) {
                if (this.Fatherdata.date_flag[1][j] !== '') {
                  this.date_flag.push(this.Fatherdata.date_flag[1][j])
                  this.reason_list.push(this.Fatherdata.date_flag[1][j])
                }
              }
              console.log(this.date_flag, 'flag')
              console.log(this.Fatherdata, 'Father')
              this.flag = true
              this.divf = false
            }
          }
        }).catch(err => {
          this.$message.error(err.message)
          console.log(err)
        })
      }
    },
    dataProcess(a) {
      var b = a.replaceAll("'", '\\"')
      // eslint-disable-next-line no-eval
      var objredis = eval('(' + b + ')')
      var c = JSON.parse(objredis)
      return c
    },
    clear() {
      this.searchname = ''
      this.searchData.start = ''
      this.searchData.end = ''
    },
    errorHandle(errorcode) {
      if (errorcode === 1){
        alert('请检查输入日期')
        this.divf = false
        window.location.replace('http://10.72.64.165:8001/#/comprehensiveQuery/comprehensiveQuery')
        this.clear()
      } else if (errorcode === 2){
        this.divf = false
        this.flag = false
        alert('没有查询到该井号信息')
        window.location.replace('http://10.72.64.165:8001/#/comprehensiveQuery/comprehensiveQuery')
        this.clear()
      } else if (errorcode === 3){
        console.log('异常')
        this.divf = false
        this.flag = false
        alert('该井载荷数据异常')
        window.location.replace('http://10.72.64.165:8001/#/comprehensiveQuery/comprehensiveQuery')
        this.clear()
      }
    },
    getNowFormatDate(value) {
      var date = new Date(value)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var e = Y + M + D
      var d = e.replace(/\s+/g,'')
      return d
    },
  }
}

</script>

<style>
#build{
  background:url('~@/../public/R-C.png') no-repeat;
  background-position: center;
  width:100%;
  height: 80%;
  position:fixed;
  left: 0%;
  top: 22%;
  background-size:cover;
  opacity: 0.3;
}
.app-container1 {
  margin: 0 0 0 0 ;
}
.cont1{
  margin: 0 0 0 0 ;
}
.search-bar1{
  position: absolute;
  top:8%
}
.flex-div{
  display: flex;
}
.display{
  display: inline-block;
  font-size: 13px;
}
</style>
